<template>
  <div class="mb-[20px] p-[20px] bg-[#dbdbdb]">
    <div>
      <div>报价</div>
      <div class="flex justify-between">
        <div>方式：{{ FeeType[formState.feeType] }}</div>
        <div>车牌：{{ formState.vehicleNo }}</div>
        <div>单号：{{ formState.shippingCode }}</div>
      </div>
      <BasicTable
        class="mb-[20px]"
        style="height: auto; min-height: 300px"
        @register="registerTable"
      />
    </div>
    <div>说明:</div>
    <Textarea disabled class="w-[100%]" :rows="5" v-model:value="formState.remark" />
    <div>注意事项:</div>
    <div>1、以上报价单均是严格技萌双方签署的运输合同价格条款执行，如有不符，以运协议约定为准</div>
    <div
      >2、本预估报价单仅为暂估可预见的费用，若产生保险费、等时费、放空费、狭卸费、压车费等异常费用，需在结算时单笔申请</div
    >

    <div>3、本预估报价单不作为双方的结算、对账、开票、付款依据</div>
    <div>4、我司承诺预估报价单均在T+0日完成，特殊况及节假日除外</div>
    <div>5、其他未尽事直，以双方签看的年度运输合同为准</div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineEmits } from 'vue';
  import { message, Textarea } from 'ant-design-vue';
  import { FeeType } from '@/enums/comEnum';
  import { BasicTable, useTable } from '@/components/Table';

  import { postQuoteRecheck } from '@/api/waybillManagement/index';

  // import { getDate } from '@/utils/time';

  const emit = defineEmits(['onSuccess', 'onFailed']);

  // const props = defineProps({
  //   queryParams: { type: Object },
  //   fromType: { type: String },
  // });

  const formState: any = ref({
    shippingOrderId: 0,
    shippingOrderIdList: [],
    fileLabel: 'quote',
    expireDate: '', //报价有效期
    remark: '', //申请备注
    tihuo: 0,
    yunshu: 0,
    songhuo: 0,
    contractTihuo: '', //提货费-合同价
    contractYunshu: '', //运输费-合同价
    contractSonghuo: '', //送货费-合同价
    feeType: '', //报价方式
  });

  const [registerTable, { setTableData }] = useTable({
    canResize: true,
    pagination: false,
    columns: [
      {
        title: '费用项',
        dataIndex: 'title',
      },
      {
        title: '预估报价',
        dataIndex: 'actualFees',
      },
      {
        title: '合同报价',
        dataIndex: 'predictionFees',
      },
    ],
    showSummary: true,
    summaryFunc: handleSummary,
  });

  function handleSummary(tableData: Recordable[]) {
    const predictionFees = tableData.reduce((prev, next) => {
      prev += next.predictionFees || 0;
      return prev;
    }, 0);
    const actualFees = tableData.reduce((prev, next) => {
      prev += next.actualFees || 0;
      return prev;
    }, 0);
    return [
      {
        title:
          '总重量' +
          (formState.value.goodsWeight || 0) +
          'KG， 吨单价：' +
          (formState.value.tonPrice || 0),
        predictionFees: '预估合计：' + predictionFees + '元',
        actualFees: '合计：' + actualFees + '元',
      },
    ];
  }

  const initFormState = async (queryParams) => {
    console.log('🚀 ~ initFormState ~ formState.value:', queryParams);
    formState.value = {
      ...queryParams,
    };

    setTableData([
      {
        title: '提货费',
        predictionFees: formState.value.contractTihuo || 0,
        actualFees: formState.value.tihuo || 0,
      },
      {
        title: '运输费',
        predictionFees: formState.value.contractYunshu || 0,
        actualFees: formState.value.yunshu || 0,
      },
      {
        title: '送货费',
        predictionFees: formState.value.contractSonghuo || 0,
        actualFees: formState.value.songhuo || 0,
      },
    ]);
  };

  const Commit = async () => {
    try {
      await postQuoteRecheck({
        shippingOrderId: formState.value.shippingOrderId,
        fileLabel: formState.value.fileLabel,
        isPass: true,
      });
      message.success('处理成功');
      formState.value = {};
      emit('onSuccess');
    } catch (error) {
      console.log('🚀 ~ .then ~ error:', error);
      message.error(error.message);
      emit('onFailed');
    }
  };

  const Return = async (rejectRemark) => {
    try {
      await postQuoteRecheck({
        shippingOrderId: formState.value.shippingOrderId,
        fileLabel: formState.value.fileLabel,
        rejectRemark,
        isPass: false,
      });
      formState.value = {};
      emit('onSuccess');
      message.success('处理成功');
    } catch (error) {
      emit('onFailed');
      message.error(error.message);
    }
  };

  defineExpose({
    initFormState,
    Commit,
    Return,
  });
</script>
